<template>
  <div id="views" class="placeOrder">
    <section id="sec1">
      <p>
        <span class="left">用户名</span>
        <span class="right">{{$store.state.name}}</span>
      </p>
      <p>
        <span class="left">名称</span>
        <span class="right">{{machineDetail.name}}</span>
      </p>
    </section>
    <section id="sec2">
      <div class="d1">
        <span class="left">购买份额</span>
        <div class="right">
          <button class="add" @click="function(){if(num <maxNum ) num++}">+</button>
          <input type="number" readonly v-model="num" @input="numchange()" @blur="outInput()">
          <button class="reduce" @click=" function() {if(num > minNum) num--}">-</button>
        </div>
      </div>
      <p class="btcPower">
        <span class="name left">BTC算力</span>
        <span class="val hoverhand right" @click="openBtcWin" style="padding-left: 0.2rem">
          <span>{{totalBtcPower || 0}}T</span>
          <img src="../../common/imgs/arrowright.png" alt="arrowRight" class="middle arrowright">
        </span>
      </p>
      <p v-if="machineDetail.bhp_power && Number(machineDetail.bhp_power) > 0">
        <span class="name left">BHP参配算力</span>
        <span class="val right">
<!--          <span v-if="machineDetail">{{Number(machineDetail.bhp_power)}}</span>T-->
          <span v-if="machineDetail">{{Number(totalBhpPower)}}</span>T
        </span>
      </p>
    </section>
<!--    <section class="sec2">-->
<!--&lt;!&ndash;      <p>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="name">产品名称</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="val">{{machineDetail.name}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;      </p>&ndash;&gt;-->
<!--&lt;!&ndash;      <p>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="name">分币比例</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="val" style="color: #F13A3A;">&ndash;&gt;-->
<!--&lt;!&ndash;          <span v-if="machineDetail">&ndash;&gt;-->
<!--&lt;!&ndash;            {{this.accMul(machineDetail.distribution_rate , 100)}}&ndash;&gt;-->
<!--&lt;!&ndash;          </span>%&ndash;&gt;-->
<!--&lt;!&ndash;        </span>&ndash;&gt;-->
<!--&lt;!&ndash;      </p>&ndash;&gt;-->
<!--      <p class="btcPower">-->
<!--        <span class="name">BTC算力</span>-->
<!--        <span class="val hoverhand" @click="openBtcWin" style="padding-left: 0.2rem">-->
<!--          {{totalBtcPower || 0}}T-->
<!--          <img src="../../common/imgs/arrowright.png" alt="arrowRight" class="middle arrowright">-->
<!--        </span>-->
<!--      </p>-->
<!--      <p v-if="machineDetail.bhp_power && Number(machineDetail.bhp_power) > 0">-->
<!--        <span class="name">BHP参配算力</span>-->
<!--        <span class="val">-->
<!--&lt;!&ndash;          <span v-if="machineDetail">{{Number(machineDetail.bhp_power)}}</span>T&ndash;&gt;-->
<!--          <span v-if="machineDetail">{{Number(totalBhpPower)}}</span>T-->
<!--        </span>-->
<!--      </p>-->
<!--&lt;!&ndash;      <p>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="name">基础算力</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="val">{{machineDetail.base_power ? machineDetail.base_power : ''}}T</span>&ndash;&gt;-->
<!--&lt;!&ndash;      </p>&ndash;&gt;-->
<!--&lt;!&ndash;      <p>-->
<!--        <span class="name">奖励算力</span>-->
<!--        <span class="val">{{machineDetail.reward_power ? machineDetail.reward_power : ''}}T</span>-->
<!--      </p>&ndash;&gt;-->
<!--      <p>-->
<!--        <span class="name">合约金额</span>-->
<!--        <span class="val" id="price">-->
<!--          <span v-if="cnyPrice > 0">{{cnyPrice}}<span> CNY</span></span>-->
<!--          <span v-if="cnyPrice > 0 && usdtPrice > 0">/</span>-->
<!--          <span v-if="usdtPrice > 0">{{usdtPrice}}<span> USDT</span></span>-->
<!--        </span>-->
<!--      </p>-->
<!--      <p>-->
<!--        <span class="name">锁定期限</span>-->
<!--        <span class="val">固定期限,{{machineDetail.regular_date_num ? machineDetail.regular_date_num : ''}}天</span>-->
<!--      </p>-->
<!--      <p>-->
<!--        <span class="name">开挖时间</span>-->
<!--        <span class="val">{{machineDetail.time_income ? machineDetail.time_income : ''}}</span>-->
<!--      </p>-->
<!--      <p>-->
<!--        <span class="name">到期时间</span>-->
<!--        <span class="val">{{machineDetail.constract_end_date ? machineDetail.constract_end_date : ''}}</span>-->
<!--      </p>-->
<!--    </section>-->
    <section id="sec3">
      <p class="title">
        <span class="left">选择支付账户</span>
        <span v-if="paytype!=='CNY'" class="floatright">
          1 <span class="payType">{{paytype}}</span>&nbsp; ≈ &nbsp;<span class="rate">{{exchange}}</span> CNY
        </span>
      </p>
      <div class="selectPayType">
        <!--选择支付方式-->
        <label :for="item.pay_currency" v-for="(item , index) in payArr" v-if="item.show">
          <input type="radio" name="paytype" v-model="paytype" :value="item.pay_currency" :id="item.pay_currency" hidden>
          <img :src="item.imgSrc" alt="">
          <span class="name">{{item.pay_currency == 'OTC' ? '余额(OTC)' : item.pay_currency }}</span>
          <span class="least">可用：{{item.balance}}</span>
          <span class="checkstyle"></span>
        </label>
      </div>
    </section>
    <div class="fixedBtm">
      <div class="ags">
        <input type="checkbox" id="agree" v-model="isAgree">
        <label for="agree" class="hoverhand">
          <span class="checkStyle"></span>
          <span>我同意</span>
          <em class="agreement" @click.prevent="showAgreement(item.code)" v-for="(item, index) in agreements">《{{item.name}}》</em>
        </label>
      </div>
      <div class="confirm">
        <span class="t">总计金额</span>
        <span class="m">{{totalAmount}}{{paytype}}</span>
        <span class="right">
          <button class="submit" @click="submit" id="td">立即支付</button>
          <span :id="tdspan" class="tdspan hoverhand" v-show="is_tongdun_on == 1 && showTd"></span>
        </span>
      </div>
    </div>
    <transition name="scale">
      <div class="btcPowerWin" v-if="showBtcPowerWin">
        <div class="content">
          <div class="top textCenter">
          <p>BTC算力</p>
          <p>{{Number(totalBtcPower)}}T</p>
        </div>
          <div class="list">
          <p>
            <span>基础算力</span>
<!--            <span>{{Number(machineDetail.base_power)}}T</span>-->
            <span>{{Number(totalBase_power)}}T</span>
          </p>
          <p>
            <span>浮动算力</span>
<!--            <span>{{Number(machineDetail.float_power)}}T</span>-->
            <span>{{Number(totalFloat_power)}}T</span>
          </p>
          <p>
            <span>达标算力</span>
            <span>0T</span>
          </p>
          <p>
            <span>期货算力</span>
            <span>{{Number(totalFutures_power)}}T</span>
          </p>
          <p>
            <span>定期算力</span>
            <span>{{Number(totalRegular_power)}}T</span>
          </p>
        </div>
          <p style="padding-top: 0.6rem;background: none;" class="textCenter">
            <img src="../../common/imgs/yuancha.png" class="hoverhand" alt="close" @click="closeBtcWin" style="width: 0.6rem">
          </p>
      </div>
    </div>
    </transition>
    <agree-ment ref="ag" hasReadText="已阅读此协议" @isRead="isRead"></agree-ment>
    <dia-log ref="dl" :msg="dialogMsg" @confirm="sure"></dia-log>
    <dia-log ref="add" msg="现金钱包余额不足，是否立即充值？" @confirm="recharge"></dia-log>
    <div class="publicCover" v-if="showCover"></div>
  </div>
</template>
<script>
  import { getMachineDetail , orderRent , orderAgreement} from '../../http/api';
  // import tdPublic from '../../common/js/tongdun';
  export default {
    name: 'place_order',
    components: {
      AgreeMent: resolve => { require(['../../components/AgreeMent'], resolve)  },
      DiaLog: resolve => {  require(['../../components/dialog'], resolve)  },
    },
    data() {
      return {
        introduce: '立即下单',
        dialogMsg : '确定购买此订单？',
        tdspan:'td' + Math.floor(Math.random()*(1-10000) + 10000),
        machine_id: '',//矿机ID
        isAgree: false,//是否同意协议
        payArr: [],//支付方式组合成数组
        exchange: 1,//汇率 1usdt = 6.5cny
        num: 0,//购买数量
        minNum: '1',/*最低购买数量*/
        maxNum: '',/*最大购买数量*/
        totalAmount: '',/*总支付金额*/
        unitPrice: [],/*单价数组*/
        usdtPrice: '',/*usdt单价*/
        cnyPrice: '',/*cny单价*/
        chosePrice: '',//选择的支付方式价格
        paytype: 'USDT',//选择的支付方式
        pay_channel : '',//ajax传值支付方式
        balance:'',//选择支付方式的余额
        machineDetail: '',//ajax拿到的矿机详细信息
        yzm_token :'',//同盾TOKEN
        blackBox:'',//同盾getInfo,
        showTd : true,//页面判断同盾显示条件
        reset:'',//同盾重载方法
        is_tongdun_on : 0, //1代表需要开起同盾验证   0不需要
        agreements : [],//协议列表
        imgs:{ //支付方式排序规则 ， 提前加载图片
          RRM_CASH :  require('../../common/imgs/rmb.png'),
          RRM_USDT : require('../../common/imgs/usdt.png'),
          RRM_BCNY : require('../../common/imgs/otc.png'),
        },
        showBtcPowerWin : false,
        showCover : false,
        totalBtcPower : '',//btc总算力
        totalBhpPower : '',//bhp总算力
        totalFloat_power : '',
        totalFutures_power : '',
        totalBase_power : '',
        totalRegular_power : '',
      }
    },
    watch: {
      paytype(nval, oval) {
        let payArr = this.payArr;
        let thiz = this;
        let price = nval == 'CNY' ? thiz.cnyPrice : thiz.usdtPrice;
        thiz.chosePrice = price;
        for (let index = 0; index < payArr.length; index++) {
          if (nval == payArr[index].pay_currency) {
            thiz.pay_channel = payArr[index].pay_channel;
            thiz.balance = payArr[index].balance;
            thiz.totalAmount = thiz.accMul(thiz.num, price);
          }
        }
        thiz.exchange = thiz.accDiv(  thiz.cnyPrice , thiz.chosePrice , 5);//高精度除法
      },
      num(){
        this.numchange();
      }
    },
    mounted() {
      console.log('ssss',this.$store.state.name)
      let thiz = this;
      thiz.machine_id = this.$route.query.machine_id;
      getMachineDetail({machine_id : thiz.machine_id}).then(res => {
        if (res.code == 200) {
          let getData = res.data;
          let machine = getData.machine;
          thiz.agreements = machine.contract;//协议
          machine.reward_power = thiz.accSub(machine.computing_power, machine.base_power);//高精度减法，获得奖励算力
          thiz.maxNum = machine.maxLimitNum;//最大购买数量
          thiz.minNum = machine.minLimitNum;//最低购买数量
          thiz.num = thiz.minNum;
          thiz.unitPrice = machine.good_deposit;//商品，各个币种的单价
          thiz.packagePayType( getData , machine );//组装支付方式
          // machine.reward_power = thiz.accMul(machine.reward_power , machine.base_power);
          thiz.machineDetail = machine;//矿机详情
          thiz.is_tongdun_on = machine.is_tongdun_on;
          if( thiz.is_tongdun_on == 1 ){
            thiz.openTongdun();// 判断是否需要开起同盾
          }
        }
      });
      this.numchange();
    },
    methods: {
      packagePayType(getData ,machine ){
        //组装支付方式
        let thiz = this;
        let asset = getData.asset;//所有资产余额
        let good_deposit = machine.good_deposit;//商品，各个币种的单价
        let payArr = machine.pay_channel;//支持支付方式合集（下方会重组）
        function showPayType(name) {
          //单价为0的话，支付方式上不显示
          for (let i = 0; i < good_deposit.length; i++) {
            let curName = good_deposit[i].pay_currency;
            let price = good_deposit[i].goods_deposit;
            if (name == curName) {
              if (name == 'USDT') {
                thiz.usdtPrice = Number(price);//设置usdt单价
              }
              if (name == 'CNY') {
                thiz.cnyPrice = Number(price);//设置cny单价
              }
              return price && price > 0  ? true : false;
            }
          }
        };
        payArr.push({pay_currency:'a',balance:'200'});
        for (let i = payArr.length - 1; i >= 0; i--) {
          let item = payArr[i];
          if( !thiz.imgs[item] ){
            payArr = thiz.arrRemove(payArr , i);//如果imgs中不存在支付方式，删除此项
          }else{
            let copyPayType = {};
            copyPayType.pay_channel = item;//ajax传值：支付方式
            copyPayType.imgSrc = thiz.imgs[item];
            switch (item) {
              case "RRM_CASH":
                copyPayType.pay_currency = 'CNY';
                copyPayType.balance = asset.CNY;
                break;
              case 'RRM_USDT':
                copyPayType.pay_currency = 'USDT';
                copyPayType.balance = asset.USDT;
                break;
              case 'RRM_BCNY':
                copyPayType.pay_currency = 'BCNY';
                copyPayType.balance = asset.BCNY;
                break;
            }
            copyPayType.show = showPayType(copyPayType.pay_currency);
            payArr[i] = copyPayType;
            if (copyPayType.show === false) {
              payArr.splice(i, 1);//如果单价为0（则需要隐藏），删除此元素
            }
          }
        }
        let order = Object.keys(thiz.imgs); //排序规则
        payArr.sort(function(a , b){
          return order.indexOf(a.pay_channel) - order.indexOf(b.pay_channel)
        });
        showPayType = null;
        thiz.payArr = payArr;//支付方式合集
        thiz.paytype = payArr[0].pay_currency;//默认选择支付方式
      },
      openTongdun( bl ){
        //开起同盾
        let tdPublic = require('../../common/js/tongdun').default;
        let thiz = this;
        let params = {
          display : 'popup',
          container: '#' + thiz.tdspan,
          width: '2.5rem',
          height: '0.99rem',
          beforeValidate : function () {
            if( !thiz.num ){
              require('../../common/js/toast').toast('请输入下单数量');
              return false
            }else{
              return true;
            }
          }
        };
        tdPublic(params, function (ret) {
          thiz.showTd = false;
          thiz.yzm_token = ret.validateToken;
          thiz.blackBox = ret.blackBox;
          thiz.reset = ret.reset;//获取重载同盾方法
          // console.log('获取同盾token');
        });
      },
      outInput() {
        this.num = parseInt(this.num) || this.minNum;
        if (this.num <= this.minNum) {
          this.num = this.minNum
        }
      },
      numchange() {
        if (this.num) {
          this.num = parseInt(this.num) || this.minNum;
          if (this.num >= this.maxNum) {
            this.num = this.maxNum
          }
          this.totalAmount = this.accMul(this.chosePrice, this.num ,0);
        } else {
          this.totalAmount = this.accMul(this.chosePrice, this.minNum ,0);
        }
        let thiz = this,
          num = thiz.num,
          machineDetail = thiz.machineDetail,
          float_power  = machineDetail.float_power,
          futures_power = machineDetail.futures_power,
          base_power  = machineDetail.base_power,
          regular_power  = machineDetail.regular_power,
          computing_power = machineDetail.computing_power,//单份btc算力
          bhp_power = machineDetail.bhp_power;//单份bhp算力
        thiz.totalBhpPower = thiz.accMul( num , bhp_power);//总bhp算力
        thiz.totalBtcPower = thiz.accMul( num , computing_power);//总btc算力
        thiz.totalFloat_power = thiz.accMul( num , float_power);
        thiz.totalFutures_power = thiz.accMul( num , futures_power);
        thiz.totalBase_power = thiz.accMul( num ,  base_power);
        thiz.totalRegular_power = thiz.accMoreMul( num , regular_power , base_power);
      },
      isRead() {
        // this.isAgree = true;
      },
      showAgreement( code ) {
        /*查看协议*/
        let thiz = this,
          params = {
            machine_id : thiz.machine_id,
            code : code,
            currency : thiz.paytype,
            num : thiz.num
         };
        orderAgreement(params).then(res => {
          if( res.code == 200 ){
            thiz.$refs.ag.agreement( res.data.contact.content );
          }
        });
      },
      recharge(){
        this.$router.push( { path : '/recharge.vue' , query:{ go : true }});
      },
      submit() {
        /*点击立即下单*/
        let thiz = this;
        let toast = require('../../common/js/toast').toast;
        if( !thiz.num ){
          toast('请输入数量');
          return false;
        }
        if( thiz.is_tongdun_on == 1 && !thiz.yzm_token ){
          toast('请先完成智能验证');
          return false;
        }
        if( thiz.balance < thiz.totalAmount ){
          //余额不足
          // if( thiz.paytype == 'CNY' ){
          //   this.$refs.add.dialogShow();//充值弹窗（仅判断CNY）
          // } else {
          //   toast( thiz.paytype+'余额不足！');
          // }
          toast( thiz.paytype+'余额不足，请充值');
          return false;
        }
        if( !thiz.isAgree ){
          toast('请同意协议！');
          return false;
        }
        this.$refs.dl.dialogShow();//显示确认下单弹窗
      },
      sure() {
        /*弹窗确认下单*/
        let thiz = this;
        let params = {
          machine_id : thiz.machine_id , num : thiz.num , pay_channel : thiz.pay_channel ,
          yzm_token : thiz.yzm_token ,blackBox : thiz.blackBox
        };
        orderRent(params).then( res => {
          if( res.code == 200 ){
            let toast = require('../../common/js/toast').toast;
            toast('下单成功!');
            thiz.$router.replace({path : '/my_power'})
          } else{
            thiz.showTd = true;
            thiz.reset();
          }
        });
      },
      openBtcWin(){
        this.showCover = true;
        this.showBtcPowerWin = true;
      },
      closeBtcWin(){
        this.showBtcPowerWin = false;
        let thiz = this;
        this.timeout(function () {
          thiz.showCover = false;
        },300)
      }
    },
    destroyed() {
      let tdEle = document.getElementsByClassName('td-outer-wrapper')[0];
      if( tdEle ) {
        tdEle.remove();//防止点开验证，直接点击返回其他页面，同盾弹窗还在
      }
      tdEle = null;
      this.reset = null;
    },
  }
</script>
<style lang="less" type="text/less" scoped>
  #td{position: relative;}
  .tdspan{
    position: absolute;z-index: 1;right: 0;top:0;height: 100%;background: linear-gradient(#fcfcfc,#f5f5f5);width: 2.5rem;opacity: 1;
  }
  #views{
    padding-bottom: 2rem;
    >section{
      padding: 0 0.28rem;background: #fff;margin-top: 0.2rem;
      &:first-child{
        margin-top: 0;
      }
      >p,>div{
        overflow: hidden;padding-top: 0.3rem;
        >.left{
          color: #595959;font-size: 0.28rem;float: left;
        }
        >.right{
          float: right;color: #262626;font-size: 0.28rem;
        }
      }
    }
    >#sec1{
      >p{
        overflow: hidden;padding-top: 0.3rem;
        &:last-child{
          padding-bottom: 0.3rem;
        }
      }
    }
    >#sec2{
      >div{
        overflow: hidden;padding-top: 0.3rem;
        >.right{
          overflow: hidden;
          >button,>input{
            float: right;background: #F3F3F3;text-align: center;height: 0.6rem;font-size: .28rem;margin-left: 0.1rem;
          }
          >button{
            width: 0.6rem;color: #898989;
            &:last-child{
              margin-left: 0;
            }
          }
          >input{
            width: 1.2rem;
          }
        }
      }
      >.btcPower{
        padding-bottom: 0.3rem;
          >.val{
            img{
              height: 0.2rem;vertical-align: middle;
            }
            >span{
              vertical-align: middle;
            }
          }
      }
    }
    >#sec3{
      >.title{
        padding:0.24rem 0;overflow: hidden;
        >.left{
          float: left;font-size: 0.24rem;overflow: hidden;color: #999999;
        }
        >span{
          line-height: 0.27rem;
        }
        >.floatright{
          font-size: 0.24rem;
        }
      }
      .selectPayType{
        background: #fff;border-radius: 0.04rem;padding:0 0rem;
        label{
          display: block;padding: 0.37rem 0;border-top: 0.015rem solid#EEEEEE;overflow: hidden;position: relative;text-align: left;
          img{width: 0.5rem;height: 0.5rem;float: left;position: absolute;left: 0;top:50%;margin-top: -0.25rem;}
          .name{font-size: 0.28rem;padding-left: 0.66rem;width: 38%;vertical-align: middle;display: inline-block;}
          .least{font-size: 0.28rem;vertical-align: middle;display: inline-block;}
        }
        label:hover{cursor: pointer;}
        .checkstyle{
          width: 0.36rem;height: 0.36rem;float: right;display: inline-block;border-radius: 50%;background: url("../../common/imgs/radioborder.png") center center no-repeat;background-size: 100% 100%;
          position: absolute;right: 0;top:50%;margin-top: -0.18rem;z-index: 1;
        }
        label:last-child{border-bottom: 0;}
        input[name=paytype]:checked ~ .checkstyle{
          background: url("../../common/imgs/blackradio.png") center center no-repeat;background-size: 100% 100%;
        }
      }
    }
    >.fixedBtm{
      position: fixed;bottom: 0;left: 0;width: 100%;background: #fff;z-index: 1;
      >.ags{
       padding: 0 0.28rem; padding-top: 0.17rem;
        input{
          width: 0;height: 0;overflow: hidden;opacity: 0;
        }
        .checkStyle{
          height: 0.28rem;width: 0.28rem;display: inline-block;vertical-align: middle;overflow: hidden;;margin-right: 0.15rem;float: left;
          border: 0.01rem solid#d2d2d2;border-radius: 0.04rem;margin-top: 0.05rem;
        }
        .agreement{
          font-size: 0.28rem;color: #FFD203;line-height: normal;font-style: normal;
        }
        #agree{
          width: 0;height: 0;border:0;float: right;
        }
        #agree:checked+label>.checkStyle{
          background: url("../../common/imgs/checkstyle_box.png") center center no-repeat;background-size: 100% 100%;border:0;
        }
        label{
          display: block;
          >span{
            line-height: normal;display: inline-block;height: 0.28rem;float: left;color: #898989;
          }
        }
      }
      >.confirm{
        overflow: hidden;border-top: 0.01rem solid#E5E5E5;margin-top: 0.24rem;padding-left: 0.28rem;
        >span{
          float: left;
        }
        >.right{
          float: right;
          >button{
            width: 2rem;border-radius: 0;height: 0.98rem;line-height: 0.98rem;font-size: 0.3rem;
          }
        }
        >.t{
          color: #898989;font-size: 0.24rem;height: 0.98rem;line-height: 0.98rem;display: inline-block;
        }
        >.m{
          color: #F67311;font-size: 0.3rem;font-weight: 600;height: 0.98rem;line-height: 0.98rem;display: inline-block;padding-left: 0.15rem;
        }
      }
    }
  }
  .btcPowerWin{
    position: fixed;z-index: 11;left: 0;top:0;width: 100%;height: 100%;-webkit-transition: all 0.2s ease-in;
    >.content{
      width: 5.04rem;position: absolute;z-index: 3;left: 50%;margin-left: -2.52rem;border-radius: 0.08rem;
      -webkit-transform: translateY(-50%);transform: translateY(-50%);top:50%;overflow: hidden;
    }
    .top{
      background: #FFCE37;font-size: 0.32rem;
      >p:first-child{
        padding-top: 0.38rem;
      }
      >p:last-child{
        padding-top: 0.15rem;color: #595959;padding-bottom: 0.38rem;font-size: 0.36rem;
      }
    }
    .list{
      padding-bottom: 0.3rem;background: #fff;border-bottom-right-radius: 0.08rem;border-bottom-left-radius: 0.08rem;
      >p{
        padding-top: 0.3rem;overflow: hidden;font-size: 0.24rem;color: #595959;
        >span{
          float: left;padding-left: 0.96rem;
        }
        >span:last-child{
          float: right;padding-right: 0.96rem;
        }
      }
    }
  }
  @media screen and (min-width: 1025px){
    #views>.fixedBtm{
      width: 600px;left: 50%;margin-left: -300px;
    }
  }

</style>
